{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>

  .container-fluid {
    background-color: #ffffff;
  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide > a > img {
    width: 100%;
  }

  .swiper-slide > img {
    width: 100%;
  }

  .swiper-pagination .swiper-pagination-bullet {
    background: rgba(10, 10, 10, .4);
    opacity: 1.0;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 3px;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid">
  <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/banner_rz.png" >

  <div class="mx-auto" style="background: #648877;margin-top: -10px;">
    <div style="text-align: center;display:flex;align-items:center;justify-content:center;padding: 30px 15px 20px;">
      <img alt="" id="no1" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/button3.png" style="width: 30%;">

      <img alt="" id="no2" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/button1.png" style="width: 30%;margin: 0 10px">

      <img alt="" id="no3" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/button2.png" style="width: 30%;">
    </div>
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/yd_01.jpg" >
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/yd_02.jpg" >
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')"  src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/yd_03.jpg" >
  </div>

  <div class="mx-auto" id="link1" style="background: #75B29E">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/rz/rz1.jpg">
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')"  style="margin-top: 10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/rz/rz2.jpg">
  </div>

  <div class="mx-auto" id="link2" style="background: #75B29E;padding-bottom: 10px;margin-top: -10px">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/zz/zz1.jpg">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/zz/zz2.jpg">
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/zz/zz3.jpg">
  </div>

  <div class="mx-auto" id="link3" style="background: #75B29E;margin-top: -5px;">
    <img alt="" style="margin-top: -10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/gz/gz1.jpg">
    <img alt="" style="margin-top: -10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/gz/gz2.jpg">
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="margin-top: -10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/mobile/gz/gz3.jpg">
  </div>

  <div style="margin: 25px;color: #333333;font-size: 12px;text-align: center;">
    *以上礼品以实物为准，活动详情咨询工作人员<br>
    以上活动解释权归致美优家所有
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    initWxShare('爱家装修季', '抢4折优品，25重整装礼');

    const swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      } ,
      autoplay: {
        delay: 4000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      paginationElement : 'li',
      paginationClickable: true,
      loop: true,
      autoplayDisableOnInteraction: false
    });

    $("#no1").click(function() {
        document.getElementById("link1").scrollIntoView(true);
    });

    $("#no2").click(function() {
        document.getElementById("link2").scrollIntoView(true);
    });

    $("#no3").click(function() {
        document.getElementById("link3").scrollIntoView(true);
    });

    $('.order').on('click', function () {
        showAppointmentLayer();
    });
</script>
{/block}